
@import './variables';

@mixin ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
}

@mixin break-all {
  word-break: break-all;
  white-space: normal;
}

@mixin vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@mixin TypographyTitle {
  font-family: $font-family-id;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  font-weight: $font-bold;
}

@mixin TypographyTitleH1() {
  font-size: 40px;
  line-height: 1.4;
  @include TypographyTitle;
  color: $heading-color;
}

@mixin TypographyTitleH2() {
  font-size: 32px;
  line-height: 1.38;
  @include TypographyTitle;
  color: $heading-color;
}

@mixin TypographyTitleH3() {
  font-size: 24px;
  line-height: 1.33;
  @include TypographyTitle;
  color: $heading-color;
}

@mixin TypographyTitleH4() {
  font-size: 20px;
  line-height: 1.4;
  @include TypographyTitle;
  color: $heading-color;
}

@mixin TypographyTitleH5() {
  font-size: 14px;
  line-height: 1.43;
  @include TypographyTitle;
  color: $heading-color;
}

@mixin TypographyTitleH6() {
  font-size: $size-small;
  line-height: 1.67;
  @include TypographyTitle;
  color: $heading-color;
}

@mixin TypographySymbolText($color: $text-color) {
  font-family: $font-family;
  font-size: $size-small;
  font-weight: $font-bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.67;
  letter-spacing: normal;
  color: $color;
}

@mixin TypographyParagraphCode($color: $paragraph-color) {
  font-family: Monaco;
  font-size: $size-small;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 2;
  letter-spacing: normal;
  color: $color;
}

@mixin TypographyParagraph($color: $paragraph-color) {
  font-family: $font-family;
  font-size: $size-small;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.67;
  letter-spacing: normal;
  color: $color;
}
